<template>
  <el-menu-item
    v-if="!item.children"
    :index="item.name"
    
    @click="clickTroops(item)"
    style="display: flex"
  >
    <i class="iconfont icon-yonghu" v-if="isCollapse"></i>
    <span>
      {{ item.meta.name }}
    </span>
  </el-menu-item>

  <el-sub-menu v-else :index="item.name">
    <template #title>
      <i class="iconfont icon-yonghu" v-if="isCollapse"></i>
      <span>
        {{ item.meta.name }}
 
       
      </span>
    </template>

    <!-- 组件自调 -->
    <!-- :index="item.path+'/'+ele.path" -->
    <div :class="isCollapse ? '' : 'noch'">
      <s-menu
        v-for="ele in item.children"
        :key="ele.name"
        :item="ele"

        @clickTroops="clickTroops"
      />
    </div>
  </el-sub-menu>
</template>
<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { RouterView } from "vue-router";
import { ref, onMounted, onUnmounted, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
import { useStore } from "vuex";
let emigFun = defineEmits(["clickTroops"]);
const store = useStore();
const isCollapse = computed(() => {
  return store.state.head.isCollapse;
});

defineProps(["item"]); //父组件向子组件传递的数据
const clickTroops = (item) => {
  emigFun("clickTroops", item);
};
defineOptions({
  name: "SMenu", //组件命名
});
const goPath = (name) => {
  console.log(name);
  router.push({ name: name });
};

onMounted(() => {});
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
</script>
<style scoped lang="scss">
// :deep() {
//   .noch {
//     // padding: 0 10px;
//     display: flex;
//     justify-content: space-between;
//     flex-wrap: wrap;

//     .el-menu-item {
        
//       flex-shrink: 0;
//       width: 70px;
//       margin-bottom: 10px;
//       text-align: center;
//       border: 1px solid red;
//       padding: 0 !important;
      
//     }
//   }
//   .el-sub-menu {
//     width: 100%;
//   }
//   .el-menu,
//   .el-menu--inline {
//     width: 100%;

//     padding: 0 !important;
//   }
// }
</style>
